extensionPrefs: Move description into a expander

The description can be useful information, but also increases the
visual complexity of the extensions list. Move it into a hidden
details area that can be expanded, which unclutters the interface
while keeping the information readily available.

https://gitlab.gnome.org/GNOME/gnome-shell/issues/1968

diff --git a/js/extensionPrefs/css/application.css b/js/extensionPrefs/css/application.css
new file mode 100644 (file)
index 0000000..1a35205
--- /dev/null
+++ b/js/extensionPrefs/css/application.css
@@ -0,0 +1,9 @@
+.details-button image {
+  transition: 250ms;
+}
+.details-button.expanded:dir(ltr) image {
+  -gtk-icon-transform: rotate(0.25turn);
+}
+.details-button.expanded:dir(rtl) image {
+  -gtk-icon-transform: rotate(-0.25turn);
+}

diff --git a/js/extensionPrefs/main.js b/js/extensionPrefs/main.js
index ac9169ba53bdc15f0e6b02aa59ad1382cb337ad3..99dfddd9f22b12d303a535a5347399e0eb509c6c 100644 (file)
--- a/js/extensionPrefs/main.js
+++ b/js/extensionPrefs/main.js
@@ -44,6 +44,17 @@ class Application extends Gtk.Application {
     vfunc_startup() {
         super.vfunc_startup();
 
+        let provider = new Gtk.CssProvider();
+        let uri = 'resource:///org/gnome/shell/css/application.css';
+        try {
+            provider.load_from_file(Gio.File.new_for_uri(uri));
+        } catch (e) {
+            logError(e, 'Failed to add application style');
+        }
+        Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(),
+            provider,
+            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+
         this._shellProxy = new GnomeShellProxy(Gio.DBus.session, 'org.gnome.Shell', '/org/gnome/Shell');
         this._window = new ExtensionsWindow({ application: this });
     }
@@ -472,6 +483,8 @@ var ExtensionRow = GObject.registerClass({
     InternalChildren: [
         'nameLabel',
         'descriptionLabel',
+        'revealButton',
+        'revealer',
     ],
 }, class ExtensionRow extends Gtk.ListBoxRow {
     _init(extension) {
@@ -514,6 +527,16 @@ var ExtensionRow = GObject.registerClass({
         let desc = this._extension.metadata.description.split('\n')[0];
         this._descriptionLabel.label = desc;
 
+        this._revealButton.connect('clicked', () => {
+            this._revealer.reveal_child = !this._revealer.reveal_child;
+        });
+        this._revealer.connect('notify::reveal-child', () => {
+            if (this._revealer.reveal_child)
+                this._revealButton.get_style_context().add_class('expanded');
+            else
+                this._revealButton.get_style_context().remove_class('expanded');
+        });
+
         this.connect('destroy', this._onDestroy.bind(this));
 
         this._extensionStateChangedId = this._app.shellProxy.connectSignal(

diff --git a/js/extensionPrefs/ui/extension-row.ui b/js/extensionPrefs/ui/extension-row.ui
index 99ea655e1e1029b742699e1af0d256f53c4ebcbc..23231e2b91b0210c97a895c78de1cd192e7c2e11 100644 (file)
--- a/js/extensionPrefs/ui/extension-row.ui
+++ b/js/extensionPrefs/ui/extension-row.ui
@@ -8,20 +8,13 @@
     <child>
       <object class="GtkGrid">
         <property name="visible">True</property>
-        <property name="margin_start">12</property>
-        <property name="margin_end">24</property>
-        <property name="margin_top">12</property>
-        <property name="margin_bottom">12</property>
-        <property name="row_spacing">6</property>
-        <property name="column_spacing">24</property>
+        <property name="margin">12</property>
+        <property name="column_spacing">12</property>
         <child>
           <object class="GtkLabel" id="nameLabel">
             <property name="visible">True</property>
             <property name="hexpand">True</property>
             <property name="halign">start</property>
-            <attributes>
-              <attribute name="weight" value="bold"/>
-            </attributes>
           </object>
         </child>
         <child>
@@ -46,9 +39,6 @@
               </object>
             </child>
           </object>
-          <packing>
-            <property name="height">2</property>
-          </packing>
         </child>
         <child>
           <object class="GtkSwitch">
@@ -57,21 +47,66 @@
             <property name="valign">center</property>
             <property name="action-name">row.enabled</property>
           </object>
-          <packing>
-            <property name="height">2</property>
-          </packing>
         </child>
         <child>
-          <object class="GtkLabel" id="descriptionLabel">
+          <object class="GtkSeparator">
+            <property name="visible">True</property>
+          </object>
+        </child>
+         <child>
+          <object class="GtkButton" id="revealButton">
             <property name="visible">True</property>
-            <property name="ellipsize">end</property>
-            <property name="max_width_chars">60</property>
-            <property name="xalign">0</property>
-            <property name="yalign">0</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="valign">center</property>
+            <style>
+              <class name="details-button"/>
+              <class name="image-button"/>
+              <class name="flat"/>
+            </style>
+            <child>
+              <object class="GtkImage">
+                <property name="visible">True</property>
+                <property name="icon_name">pan-end-symbolic</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkRevealer" id="revealer">
+            <property name="visible">True</property>
+            <child>
+              <object class="GtkGrid">
+                <property name="visible">True</property>
+                <property name="margin_top">12</property>
+                <property name="row_spacing">6</property>
+                <property name="column_spacing">12</property>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="label" translatable="yes">Description</property>
+                    <property name="xalign">0</property>
+                    <style>
+                      <class name="dim-label"/>
+                    </style>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="descriptionLabel">
+                    <property name="visible">True</property>
+                    <property name="ellipsize">end</property>
+                    <property name="max_width_chars">60</property>
+                    <property name="xalign">0</property>
+                    <property name="yalign">0</property>
+                  </object>
+                </child>
+              </object>
+            </child>
           </object>
           <packing>
             <property name="left_attach">0</property>
             <property name="top_attach">1</property>
+            <property name="width">5</property>
           </packing>
         </child>
       </object>

diff --git a/js/prefs-resources.gresource.xml b/js/prefs-resources.gresource.xml
index 193d305d0214c41db1a9ba6da5e3be909a40c17e..11b9b5aa5a3d3e43dc271f11210075ccd6b67179 100644 (file)
--- a/js/prefs-resources.gresource.xml
+++ b/js/prefs-resources.gresource.xml
@@ -8,6 +8,8 @@
     <file>misc/fileUtils.js</file>
     <file>misc/params.js</file>
 
+    <file alias="css/application.css">extensionPrefs/css/application.css</file>
+
     <file alias="ui/extension-row.ui">extensionPrefs/ui/extension-row.ui</file>
     <file alias="ui/extensions-window.ui">extensionPrefs/ui/extensions-window.ui</file>
   </gresource>